<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>

<body>

    <div id="app">

        <!-- 
            生命周期分成几个阶段？
            1、创建  --  组件创建时执行
            2、挂载  --  DOM被挂载时执行
            3、更新  --  数据被修改时执行
            4、销毁  --  元素被销毁前执行

            生命周期执行顺序
            beforeCreate：
            意思：实例初始化之后，数据观测，事件配置之前去使用
            用法：这个阶段初始化一些还没有被vue代理的数据
            created
            意思：实例被创建完之后立即调用（观察数据、属性、方法的执行运算，watch 事件回调...）
            用法：可以进行访问和修改数据，但是并没有挂载到DOM上
            beforerMount
            意思：在挂在开始之前被调用，首次render被调用
            用法：在挂载之前执行一些操作，比如修改DOM解构
            mounted
            意思：元素被新元素替换，被挂载到实例上进行调用钩子函数
            用法：操作DOM，以及逻辑
            beforeUpdate
            意思：数据被更新时调用，发生在虚拟DOM重新渲染和补丁之前
            用法：对之前的状态进行访问
            updated
            意思：数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用
            用法：操作 DOM，但避免在此期间更改数据，因为可能导致无限循环更新。
            beforeUnmount

            unmounted

         -->

         <input type="text" v-model="message" @keyup="ceshi">
         <div>{{message}}</div>
    </div>
</body>

<script>
    const { createApp } = Vue

    const vm = createApp({
        data() {
            return {
                message: '',
            }
        },
        beforeCreate(){
            console.log('beforeCreate, 实例刚刚被创建了');
        },
        created(){
            console.log('created, 实例创建完成');
        },
        beforeMount(){
            console.log('beforeMount, 挂载开始之前');
        },
        mounted(){
            console.log('mounted, 实力已经挂载');
        },
        beforeUpdate(){
            console.log('beforeUpdate, 数据更新之前');
        },
        updated(){
            console.log('updated, 数据更新完成');
        },
        beforeUnmount(){
            console.log('beforeUnmount, 实例卸载之前');
        },
        unmounted(){
            console.log('unmounted, 实例已卸载');
        },
        methods: {
            ceshi(){
                if(this.message === '123'){
                    this.$options.beforeUnmount()
                    this.$options.unmounted()
                }
            }
        }
    }).mount('#app')


</script>

</html>